<template>
  <div
    :ref="info._id"
    v-ui-ref="vSetRef"
    class="board-box"
    :class="[
      'mt-' + (extension.topMargin && extension.topMargin.value),
      'mr-' + (extension.rightMargin && extension.rightMargin.value),
      'mb-' + (extension.bottomMargin && extension.bottomMargin.value),
      'ml-' + (extension.leftMargin && extension.leftMargin.value),
    ]"
    :style="[
      {
        'background-color': extension.bgColor && extension.bgColor.value,
        'border-radius': (extension.radius && extension.radius.value) + 'px',
        height: (extension.boxInnerHeight && extension.boxInnerHeight.value) + 'px',
        '--shadowColor': detailInfo?.shadowColor || 'transparent',
      },
    ]"
  >
    <svg
      v-if="detailInfo.showLink?.value"
      class="icon absolute"
      height="256"
      p-id="2367"
      style="transform: scale(0.11); right: -90px; top: -80px; z-index: 999"
      t="1690790579019"
      version="1.1"
      viewBox="0 0 1024 1024"
      width="256"
      xmlns="http://www.w3.org/2000/svg"
      @click="chooseSvg"
    >
      <path
        d="M941.98866 202.785519c33.767058 83.243913 17.682731 182.610014-48.573275 250.288416-72.960709 74.535577-183.230138 86.150102-268.901333 36.776601l-61.929468 69.124334 44.180222 45.316092 26.403347-26.985608c13.512758-13.796214 35.396161-13.796214 48.907896 0L896.310318 798.3661c13.499455 13.796214 13.499455 36.145222 0 49.941436l-97.80249 99.908454c-13.499455 13.796214-35.382858 13.796214-48.895617 0L535.378965 727.155245c-13.499455-13.782911-13.499455-36.144198 0-49.942459l24.118304-24.633027-42.125423-43.147706-296.296263 330.671165c-27.005051 27.594475-70.790276 27.594475-97.795327 0l-24.447808-24.982998c-27.01119-27.592428-27.01119-72.313979 0-99.909477l337.51606-288.774963L212.168726 296.829406l-70.770833-0.026606L59.50372 162.223708l65.966411-67.483974 134.729517 84.212984 0.916882 70.830185 226.750327 232.56373 65.983807-56.45171c-64.48671-89.820702-57.768705-216.301348 21.727861-297.504788 65.933665-67.354014 162.638147-84.070744 243.892753-50.210565L674.171008 224.552266 796.401864 349.431437 941.98866 202.785519zM180.004165 850.425779c-13.513782-13.795191-35.403325-13.795191-48.90892 0-13.491269 13.797237-13.491269 36.171828 0 49.968042 13.505595 13.795191 35.395138 13.795191 48.90892 0C193.503621 886.597607 193.503621 864.223017 180.004165 850.425779z"
        fill="#ffffff"
        p-id="2368"
      />
    </svg>
    <div class="w-full h-full flex flex-col justify-between items-center relative">
      <div class="w-full">
        <div
          class="title-box relative"
          :style="{
            color: extension.titleColor && extension.titleColor.value,
          }"
        >
          <img v-if="detailInfo?.IsAlarm" alt="" class="state-img" :src="detailInfo?.stateImg" @click="openPop" />
          <p class="title-text">{{ detailInfo?.EquName || '' }}</p>
        </div>
        <div class="content text-white">
          <p v-for="(item, index) in detailInfo?.Items" :key="index" class="flex">
            <span class="left-cont inline-block">{{ item.ItemName }} :</span>
            <span class="right-cont inline-block">{{ item.ItemValue }}</span>
          </p>
        </div>
      </div>
      <div class="flex justify-between w-full text-white items-center">
        <div>
          <img v-show="detailInfo?.imageUrl" alt="" class="equ-img" :src="detailInfo?.imageUrl" />
        </div>
        <span class="state inline-block">{{ detailInfo?.Status }}</span>
      </div>
    </div>
    <div v-if="popShow">
      <div class="popover-out fixed w-full h-full" @click="closePop"></div>
      <div class="popover-modal el-popper is-light el-popover page-modal-body">
        <a class="absolute top-0 right-0 p-0.5 bg-gray-100 rounded-full cursor-pointer z-2 hover:bg-red-400 hover:text-white" @click="closePop">
          <vui-icon icon="close-line" />
        </a>
        <div class="popContent w-full">
          <div class="text-left" v-html="detailInfo?.AlarmCode"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import assign from 'lodash/assign'
  import cloneDeep from 'lodash/cloneDeep'
  import { getModelInfo } from '@ve/utils/getModelInfo'
  // import { actionsTask } from '@ve/eventTask/index'
  export default defineComponent({
    name: 'UiCardDeatil',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        status: null,
        popShow: false,
        detailInfo: {},
        timer: null,
      }
    },
    computed: {
      extension() {
        return this.info.extension
      },
    },
    watch: {
      info: {
        handler() {
          this.$nextTick(() => {
            this.timer && clearInterval(this.timer)
            this.getDeviceData()
            this.timer = setInterval(() => {
              this.getDeviceData()
            }, 1000)
          })
        },
        deep: true,
      },
    },
    created() {},
    mounted() {
      this.$nextTick(() => {})
    },
    beforeUnmount() {
      this.timer && clearInterval(this.timer)
      this.getInfo.data.formData = {}
    },
    methods: {
      chooseSvg() {
        this.getInfo.data = {
          formData: { equId: this.detailInfo.EquID },
        }
        this.onChange()
      },
      openPop() {
        this.popShow = true
      },
      closePop() {
        this.popShow = false
      },
      getDeviceData() {
        let formData = {}
        formData = getModelInfo(this, this.info._id)?.data?.formData
        this.$request(
          {
            api: '/wcs/wcs-api',
            method: 'ICollectorService.GetAllCurrentData',
            getDataKey: 'ICollectorService.GetAllCurrentData',
            data: [{ key: 'EQU_IDS', value: formData.EquID }],
          },
          (res) => {
            console.warn('res', res, formData)
            this.detailInfo = assign(cloneDeep(formData), res[0])
          }
        )
      },
    },
  })
</script>

<style lang="scss" scoped>
  .board-box {
    min-height: 200px;
    padding: 25px;
    box-shadow: 0 0 20px 3px inset var(--shadowColor);
    &::-webkit-scrollbar {
      display: none;
    }
    .title-box {
      text-align: center;
      background: linear-gradient(to right, transparent, var(--shadowColor) 50%, transparent);
      font-size: 18px;
      padding: 12px 0;
      letter-spacing: 1px;
      .state-img {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }

    .content {
      padding: 5px 0;
      line-height: 2rem;
      font-size: 18px;
      height: 285px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .left-cont {
        width: 60%;
        margin-right: 27px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .right-cont {
        width: 30%;
        margin-right: 27px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .equ-img {
      width: 80px;
    }

    .state {
      font-size: 18px;
      text-align: center;
      padding: 4px;
      width: 80px;
      background: linear-gradient(to right, transparent, var(--shadowColor) 50%, transparent);
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .popover-out {
    top: 0;
    left: 0;
    background-color: #00000045;
    cursor: pointer;
    animation: fadeIn 0.2s linear;
  }
  .popover-modal {
    &::-webkit-scrollbar-track {
      display: none;
    }
    padding: 5px;
    position: fixed;
    overflow-y: auto;
    transform: translate(10%, 0%);
    background-color: #fff;
    animation: fadeIn 0.2s linear;
    background-color: #ff0000;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    .popContent {
      width: 100%;
      height: 100%;
      overflow: auto;
      color: #fff;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>
